<template>
  <div>
    <div v-for="item in ch" v-if="ch !== null" v-bind:key="item">
      <el-submenu :index="item.name" v-if="item.type === 'folder'" v-bind:key="item" :title="item.name">
        <template slot="title">
          <el-col span="20">
            <div class="sign">
              <span class="icon iconfont" style="color: rgb(238, 153, 0)">&#xe616;</span>
              <span slot="title"
                    style="overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space:nowrap;">{{item.name}}</span>
            </div>
          </el-col>
        </template>
        <target-tree :ch="item.childNodes" :page="page"></target-tree>
      </el-submenu>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TargetTree",
    props: {
      ch: {
        type: Array,
        default() {
          return [];
        }
      },
      page: {}
    },
    data() {
      return {
        newFolderName: '',
        isBuildFolder: false
      }
    },
    methods: {}
  }
</script>

<style>

  .el-submenu {
    border-radius: 15px;
  }

  .el-submenu__title {
    display: flex;
    align-items: center;
  }

  .el-menu-item.is-active {
    background-color: rgb(57, 141, 238);
  }

  .el-menu.demo-type {
    position: absolute;
    margin-right: 0;
  }

  .el-menu {
    position: relative;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
  }

  #fileNav.el-menu {
    height: 100%;
  }

</style>
